<template>
	<div class="main">
		<div class="index-hot">
			<h3 class="h3-component">
				<span class="h3">热门</span>
			</h3>
			<div class="clear" style="height: 361px;">
				<div class="video-card-box left">
					<!-- video-card -->
					<div class="video-card video-card-big">
						<div class="video-card-width">
							<router-link class="video-link" :to="`/video/${hot_video_0.aid}`" target="_blank">
								<div class="video-img">
									<img :src="hot_video_0.pic && imgBaseUrl+hot_video_0.pic" alt="" />
								</div>
								<div class="video-info">
									<div class="video-info-bg"></div>
									<div class="video-info-zindex">
										<div class="video-title">{{hot_video_0.title}}</div>
										<div class="video-from">
											<span :class="`icon-from icon-from-${hot_video_0.pub_platform}`"></span>
											<span class="minutes">{{ hot_video_0.minute }}</span>
										</div>
									</div>
								</div>
							</router-link>
							<div class="video-click">
								<span :class="hot_video_0.storeClass" @click="storeFn_0()">{{hot_video_0.store_num}}</span>
								<span :class="hot_video_0.good" @click="goodFn_0()">{{hot_video_0.good_num}}</span>
							</div>
						</div>
					</div>
					<!-- video-card -->
				</div>
				<div class="video-card-box video-card-box--2 right">
					<!-- video-card -->
					<div class="video-card" v-for="item in hot_video" :key="item.aid">
						<div class="video-card-width">
							<router-link class="video-link" :to="`/video/${item.aid}`" target="_blank">
								<div class="video-img">
									<img :src="imgBaseUrl+item.pic" alt="" />
								</div>
								<div class="video-info">
									<div class="video-info-bg"></div>
									<div class="video-info-zindex">
										<div class="video-title">{{item.title}}</div>
										<div class="video-from">
											<span :class="`icon-from icon-from-${item.pub_platform}`"></span>
											<span class="minutes">{{ item.minute }}</span>
										</div>
									</div>
								</div>
							</router-link>
							<div class="video-click">
								<span :class="item.storeClass" @click="storeFn(item,'hot_video')">{{item.store_num}}</span>
								<span :class="item.good" @click="goodFn(item,'hot_video')">{{item.good_num}}</span>
							</div>
						</div>
					</div>
					<!-- video-card -->
				</div>
			</div>
		</div>
		<div class="index-ip">
			<h3 class="h3-component">
				<span class="h3">IP视频</span>
			</h3>
			<div class="video-card-box video-card-box--4 clear" style="height: 180px;">
				<!-- video-card -->
				<div class="video-card" v-for="item in ip_video" :key="item.aid">
					<div class="video-card-width">
						<router-link class="video-link" :to="`/video/${item.aid}`" target="_blank">
							<div class="video-img">
								<img :src="imgBaseUrl+item.pic" alt="" />
							</div>
							<div class="video-info">
								<div class="video-info-bg"></div>
								<div class="video-info-zindex">
									<div class="video-title">{{item.title}}</div>
									<div class="video-from">
										<span :class="`icon-from icon-from-${item.pub_platform}`"></span>
										<span class="minutes">{{ item.minute }}</span>
									</div>
								</div>
							</div>
						</router-link>
						<div class="video-click">
							<span :class="item.storeClass" @click="storeFn(item,'ip_video')">{{item.store_num}}</span>
							<span :class="item.good" @click="goodFn(item,'ip_video')">{{item.good_num}}</span>
						</div>
					</div>
				</div>
				<!-- video-card -->
			</div>
		</div>
		<div class="clear">
			<div class="width--3 left">
				<div class="index-tui">
					<h3 class="h3-component">
						<span class="h3">推荐视频</span>
					</h3>
					<div class="video-card-box clear" style="height: 360px;">
						<!-- video-card -->
						<div class="video-card" v-for="item in recomm_video" :key="item.aid">
							<div class="video-card-width">
								<router-link class="video-link" :to="`/video/${item.aid}`" target="_blank">
									<div class="video-img">
										<img :src="imgBaseUrl+item.pic" alt="" />
									</div>
									<div class="video-info">
										<div class="video-info-bg"></div>
										<div class="video-info-zindex">
											<div class="video-title">{{item.title}}</div>
											<div class="video-from">
												<span :class="`icon-from icon-from-${item.pub_platform}`"></span>
												<span class="minutes">{{ item.minute }}</span>
											</div>
										</div>
									</div>
								</router-link>
								<div class="video-click">
									<span :class="item.storeClass" @click="storeFn(item,'recomm_video')">{{item.store_num}}</span>
									<span :class="item.good" @click="goodFn(item,'recomm_video')">{{item.good_num}}</span>
								</div>
							</div>
						</div>
						<!-- video-card -->
					</div>
				</div>

				<div class="index-new">
					<h3 class="h3-component">
						<span class="h3">最新视频</span>
					</h3>
					<div class="video-card-box clear" style="height: 360px;">
						<!-- video-card -->
						<div class="video-card" v-for="item in new_video" :key="item.aid">
							<div class="video-card-width">
								<router-link class="video-link" :to="`/video/${item.aid}`" target="_blank">
									<div class="video-img">
										<img :src="imgBaseUrl+item.pic" alt="" />
									</div>
									<div class="video-info">
										<div class="video-info-bg"></div>
										<div class="video-info-zindex">
											<div class="video-title">{{item.title}}</div>
											<div class="video-from">
												<span :class="`icon-from icon-from-${item.pub_platform}`"></span>
												<span class="minutes">{{ item.minute }}</span>
											</div>
										</div>
									</div>
								</router-link>
								<div class="video-click">
									<span :class="item.storeClass" @click="storeFn(item,'new_video')">{{item.store_num}}</span>
									<span :class="item.good" @click="goodFn(item,'new_video')">{{item.good_num}}</span>
								</div>
							</div>
						</div>
						<!-- video-card -->
					</div>
				</div>
				<div class="index-subject">
					<h3 class="h3-component">
						<span class="h3">热门专题</span>
					</h3>
					<div class="subject-card-box clear" style="height: 227px;">
						<el-carousel indicator-position="outside" :autoplay="false" height="200px">
							<el-carousel-item class="hot-video" v-for="(item,index) in hot_subject" :key="index" >
								<!-- video-card -->
								<div class="subject-card" v-for="card in item" :key="card.aid">
									<router-link :to="`subject/${card.subject_id}?title=${card.subject_name}`">
										<div class="video-card-width">
											<div class="subject-img">
												<img :src="imgBaseUrl+card.pic" />
											</div>
										</div>
										<div class="subject-title">
											{{ card.subject_name }}
										</div>
									</router-link>
								</div>
								<!-- video-card -->
							</el-carousel-item>
						</el-carousel>
					</div>

				</div>
			</div>
			<div class="width--1 right">
				<div class="index-hot-ip">
					<h3 class="h3-component">
						<span class="h3">热门IP</span>
					</h3>
					<div class="ip-list-box" style="height: 360px;">
						<div class="ip clear" v-for="item in hot_ip" :key="item.ip_id">
							<router-link class="video-link" :to="{path: `ip/${item.ip_id}`}" target="_blank">
								<div class="ip-img left">
									<img :src="imgBaseUrl+item.pic" />
								</div>
								<div class="ip-name left">
									{{ item.ip_name }}
								</div>
							</router-link>
							<div class="ip-follow right">
								<span class="btn-follow" v-if="item.store!=1" @click="followFn(item)">+订阅</span>
								<span class="followed" v-else><i class="icon icon-followed"></i>已订阅</span>
							</div>
						</div>
					</div>
				</div>

				<div class="index-ranking">
					<h3 class="h3-component">
						<span class="h3">视频排行榜</span>
					</h3>
					<div class="video-card-box--1">
						<!-- video-card -->
						<div class="video-card clear" v-for="item in rank_list" :key="item.aid">
							<router-link class="video-link" :to="`/video/${item.aid}`" target="_blank">
								<div class="video-left left">
									<div class="video-view">
										<div class="video-img">
											<img :src="imgBaseUrl+item.pic" alt="" />
										</div>
									</div>
									<div class="video-from">
										<span :class="`icon-from icon-from-${item.pub_platform}`"></span>
										<span class="minutes">{{ item.minute }}</span>
									</div>
								</div>
								<div class="video-right right">
									<div class="title">{{item.title}}</div>
								</div>
							</router-link>
							<div class="video-click">
								<span :class="item.storeClass" @click="storeFn(item,'rank_list')">{{item.store_num}}</span>
								<span :class="item.good" @click="goodFn(item,'rank_list')">{{item.good_num}}</span>
							</div>
						</div>
						<!-- video-card -->
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { indexpage, subscriptionAdd, getmenuvideo, updategood, storefrontAdd, imgBaseUrl } from '@/api';
import { utilStore, utilGood, utilFollow } from '@/util/util'
import { mapState, mapMutations } from 'vuex'
export default {
	data() {
		return {
			imgBaseUrl,
			// 界面展示
			hot_video_0: {},
			hot_video: [],
			ip_video: [],
			recomm_video: [],
			hot_ip: [],
			rank_list: [],
			new_video: [],
			hot_subject: [],
		}
	},
	computed: {
		...mapState([
			'userInfo',
			'login'
		]),
	},
	// 初始化
	created () {
		this.getResData();
	},
	methods: {
		...mapMutations([
			'DIALOG_LOGIN',
		]),
		// 订阅
		followFn(item){
			utilFollow(item, this, 'hot_ip', subscriptionAdd, 1);
		},
		storeFn_0(){
			if(this.login){
				let para = {
					aid: this.hot_video_0.aid,
					user_id: this.userInfo.user_id
				}
				storefrontAdd(para).then(res=> {
					if(res.data){
						this.hot_video_0.store_num++;
						this.hot_video_0.storeClass = 'icon-bg icon-store'
					}else{
						if(res.tologin){
							this.DIALOG_LOGIN();
						}else {
							this.$message.warning(res.msg);
						}
					}
				})
			}else{
				this.DIALOG_LOGIN();
			}
		},
		goodFn_0(){
			if(this.hot_video_0.goodcan){
				let para = {
					aid: this.hot_video_0.aid
				}
				updategood(para).then(res=> {
					if(res.data){
						this.hot_video_0.good_num++;
						this.hot_video_0.good = 'icon-bg icon-good';
						this.hot_video_0.goodcan = false;
					}else{
						this.$message.warning(res.msg);
					}
				})
			}
		},
		// 收藏 
		storeFn(item,res_data){
			utilStore(item, this, res_data, storefrontAdd);
		},
		goodFn(item,res_data){
			utilGood(item, this, res_data, updategood);
		},
		getResData (){
			// 获取首页数据
			let para = {
				user_id: this.userInfo?this.userInfo.user_id:'',
			}
			indexpage(para).then(res=> {
				if(res.data){
					let res_data = res.data;
					for(let n in res_data){
						for(let i=0; i<res_data[n].length; i++){
							res_data[n][i].storeClass = res_data[n][i].store!=1?'icon-bg icon-store-o':'icon-bg icon-store';'icon-bg icon-store-o';
							res_data[n][i].good = 'icon-bg icon-good-o';
							res_data[n][i].goodcan = true;
						}
					}
					// 最热
					this.hot_video_0 = res_data.hot_video[0];
					this.hot_video = res_data.hot_video.slice(1,5);
					// IP视频
					this.ip_video = res_data.ip_video.slice(0,4);
					// 推荐视频
					this.recomm_video = res_data.recomm_video.slice(0,6);
					// 热门IP
					this.hot_ip = res_data.hot_ip.slice(0,4);
					// 视频排行榜
					this.rank_list = res_data.rank_list.slice(0,6);
					// 最新视频
					this.new_video = res_data.new_video.slice(0,6);
					// 热门专题
					let hot_subject = res_data.hot_subject;
					let hot_subject_result = [];
					for(var i=0,len=hot_subject.length;i<len;i+=3){
						hot_subject_result.push(hot_subject.slice(i,i+3));
					}
					this.hot_subject = hot_subject_result;

				}else{
					this.$message.warning(res.msg);
				}
			})
		},
	},
}
</script>

<style scoped lang="scss">
.main {
	padding-bottom: 20px;
}
.subject-card-box {
	.subject-card {
		float: left;
		margin-right: 20px;
	}
	.subject-card:nth-child(3){
		margin-right: 0;
	}
}
.video-card-big {
	width: 590px;
	.video-card-width{
		padding-bottom: 341px;
	}
}
.video-card-box--2{
	width: 590px;
	.video-card:nth-child(2n){
		margin-right: 0;
	}
	.video-card:nth-child(3n){
		margin-right: 20px;
	}
}
.video-card-box--4 {
	.video-card:nth-child(4n){
		margin-right: 0;
	}
	.video-card:nth-child(3n){
		margin-right: 20px;
	}
}
.width--3 {
	width: 895px;
}
.width--1 {
	width: 285px;
}
.ip {
	margin-top: 10px;
	padding: 10px 15px;
	width: 100%;
	border: 1px solid #ccc;
	border-radius: 3px;
	box-shadow: 0 0 10px rgba(0,0,0,.3);
	line-height: 55px;
	.ip-img {
		width: 55px;
		height: 55px;
		overflow: hidden;
		border-radius: 50%;
		img {
			display: block;
			width: 100%;
			height: 100%;
		}
	}
	.ip-name {
		padding-left: 20px;
	}
}
.video-card-box--1{
	.video-card {
		position: relative;
		top: 0;
		left: 0;
		margin-bottom: 15px;
		.video-left {
			position: relative;
			width: 145px;
			.video-view {
				width: 100%;
				height: 0;
				padding-bottom: 56.25%;
				overflow: hidden;
				.video-img {
					transition: all .2s linear;
					-webkit-transition: all .2s linear;
				}
			}
			.video-from {
				position: absolute;
				bottom: 6px;
				left: 5px;
				height: 16px; 
				line-height: 16px;
				font-size: 12px;
				.minutes { 
					color:#fff;
					vertical-align: middle;
					padding-left: 4px;
				}
			}
		}
		.video-left:hover{
			.video-img {
				-webkit-transform: scale(1.05);
				transform: scale(1.05);
			}
		}
		.video-right {
			width: 130px;
			.title {
				line-height: 23px;
				width: 100%;
				height: 46px;
				overflow: hidden;
			}
		}
		.video-click {
			position: absolute;
			bottom: 5px;
			left: 155px;
			font-size: 12px;
			z-index: 3;
			.icon-store-o{
				background-position: 0 -144px;
			}
			.icon-good-o{
				background-position: 0 -128px;
			}
			.icon-store,.icon-store-o:hover{
				background-position: 0 -48px;
			}
			.icon-good,.icon-good-o:hover {
				background-position: 0 -16px;
			}
		}
	}
	
	
}
</style>